<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Selector</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /*div h2{
            background-color: cyan;
        }*/
        .div1 div:first-child{background-color: purple}
          /*属性选择器*/

        [name]{border:1px solid orangered}
        /*包含e的name属性的元素*/
        [name*="x"]{border:1px solid fuchsia; display: block}
        /*以y为结尾的name属性元素*/
        [name$="d"]{border:1px solid yellow; display: block}
        /*以u_开头name属性元素*/
        [name^="u_"]{border:1px solid fuchsia; display: block}
    </style>
</head>
<body>
<input type="text" name="u_name">
<input type="password" name="password">
<input type="radio" name="sex">


    <h2>bodyH2</h2>
    <h1><div>
        <h2>h1>div>h2</h2>
    </div></h1>
    <p>test

    </p>
    <div>
        <h2><div class="div1">
            <span><h2>div>h2>div>h2</h2></span>
        </div></h2>
        <h2>标题2</h2>
    </div>

</body>
</html>